import React, { Component } from 'react';
import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import { Menu, Icon } from 'antd';
import PropTypes from 'prop-types';
import { Route, Switch } from 'react-router-dom';

import Goodscategory from './goods/category/Index';
import Goodsitem from './goods/management/Index';

import Indexin from './Index/Index';


import OrderAll from './order/Index';
import OrderRefund from './order/Refund';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

@inject('globalStore') @observer
class App extends Component {
  @observable current = this.props.location.pathname;
  componentDidMount() {
  }

  handleClick = (e) => {
    const { history } = this.props;
    this.current = e.key
    switch (e.key) {
      case '/goodscategory':
        history.push('/goodscategory');
        break;
      case '/goodsitem':
        history.push('/goodsitem/1');
        break;
      case '/orderall':
        history.push('/orderall');
        break;
      case '/orderrefund':
        history.push('/orderrefund');
        break;
      case '/indexin':
        history.push('/indexin');
        break;
      default:
    }
  }

  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const globalStore = this.props.globalStore

    return (
      <div className="app">
        <div className="logoiot" />
        <Menu
          onClick={this.handleClick}
          selectedKeys={[this.current]}
          mode="horizontal"
          theme="dark">
          <Menu.Item key="/indexin">
          <Icon type="windows" />首页
          </Menu.Item>
          <SubMenu title={<span style={{fontSize: '15px'}} ><Icon type="inbox" />商品</span>}>
            <MenuItemGroup>
            <Menu.Item key="/goodscategory">商品分类</Menu.Item>
            <Menu.Item key="/goodsitem">商品管理</Menu.Item>
            </MenuItemGroup>
          </SubMenu>
          <SubMenu title={<span style={{fontSize: '15px'}}><Icon type="profile" />订单</span>}>
            <MenuItemGroup>
              <Menu.Item key="/orderall">全部订单</Menu.Item>
              <Menu.Item key="/orderrefund">退货维权</Menu.Item>
            </MenuItemGroup>
          </SubMenu>
        </Menu>

        <div className="app-container">
          <Switch>
            <Route path="/" exact component={ Indexin } />
            <Route path="/indexin" exact component={ Indexin } />
            <Route path="/goodscategory" component={ Goodscategory } />
            <Route path="/goodsitem" exact component={ Goodsitem } />
            <Route path="/goodsitem/:tabs" exact component={ Goodsitem } />
            <Route path="/orderall" component={ OrderAll } />
            <Route path="/orderrefund" component={ OrderRefund } />
          </Switch>
        </div>
      </div>
    );
  }
}

export default App;
